<template>
  <div style="height: 100%; overflow-y: scroll; background: #f9f8f3">
    <div class="noteText">
      <text>过期后未消费不可退款，退款后积分退回优惠券不退还 </text>
    </div>
    <div class="dividerH"></div>
    <div class="card">
      <text class="titleText grey">{{ params.title }}</text>
      <div class="row" style="align-items: start; width: 100%">
        <img
          src="https://tse2-mm.cn.bing.net/th/id/OIP-C.cn_mIqJN0Td_0Ono0xMEsQHaLL?rs=1&pid=ImgDetMain"
          class="image"
        />
        <div style="width: 10px"></div>
        <div class="column" style="width: 100%; align-items: start">
          <div class="textTitle1">
            {{ params.goodsType }}
          </div>
          <div>
            <time-place
              v-if="params.title === ReservationType.activity"
            ></time-place>
            <TimeReservation
              v-if="params.title === ReservationType.share"
            ></TimeReservation>
          </div>

          <text class="textMoney111">700￥</text>
          <div class="row" style="width: 100%; justify-content: space-between">
            <text class="moneyText12313">到手价600￥</text>

            <div>
              <count-buttons
                width="50px"
                v-if="params.title === ReservationType.activity"
                :onCountChange="onCountChange"
              ></count-buttons>
              <text v-if="params.title === ReservationType.share">x1</text>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dividerH"></div>
    <!-- <div class="card">
            <text>订单联系人</text>
            <div class="row" style="justify-content: space-between; width: 100%">
                <div class="textName">姓名:吴叨叨</div>
                <div class="textName">电话:1820560928</div>
            </div>
        </div> -->
    <OrderContact></OrderContact>
    <div class="dividerH"></div>
    <div class="card">
      <div class="row">
        <text>可退金额</text>
        <text class="textF111">￥1000</text>
      </div>
    </div>
    <div class="dividerH"></div>
    <div class="card">
      <div class="textFhsah">退款原因</div>
      <div style="width: 100%; justify-content: start">
        <van-radio-group v-model="reason">
          <div
            v-for="(item, index) in reasons"
            :key="index"
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              padding-bottom: 2px;
            "
          >
            <div>
              {{ item.reason }}
            </div>
            <van-radio :name="item.id"></van-radio>
          </div>
        </van-radio-group>

        <div>
          <van-field
            v-model="reasonText"
            clearable
            placeholder="输入理由"
            type="textarea"
            autosize
            style="border: 1px solid #f5f5f5; border-radius: 5px"
          />
        </div>
      </div>
      <div class="dividerH"></div>
      <div style="display: flex; flex-direction: row; flex-wrap: wrap">
        <div v-for="(item, index) in images" :key="index">
          <div>
            <div
              style="transform: translate(80px, -100px)"
              @click="
                () => {
                  removeImage(item);
                }
              "
            >
              <uni-icons type="closeempty"></uni-icons>
            </div>
          </div>
        </div>
      </div>

      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
        "
      >
        <van-uploader v-model="fileList" multiple>
          <div class="upload">
            <div class="column" style="justify-content: center; height: 100%">
              <van-icon name="photo-o" />

              <div><text class="textUpload">上传凭证最多9张</text></div>
            </div>
          </div>
        </van-uploader>
      </div>
    </div>
    <div class="dividerH"></div>

    <div
      class="row"
      style="justify-content: center; padding-left: 50px; padding-right: 50px"
    >
      <van-button type="primary" @click="applyRefund" round size="large"
        >申请退款</van-button
      >
    </div>
    <div style="height: 20px"></div>
    <!-- <uni-popup ref="pop" type="center">
      <uni-popup-dialog
        mode="base"
        message="成功消息"
        title="申请退订"
        content="退款后订单无法恢复,请确认是否申请"
        :duration="2000"
        :before-close="true"
        @close="close"
        @confirm="confirm"
        ><div style="font-size: 12px; font-weight: bold">
          <div>退款后订单无法恢复,请确认是否申请?</div>
          <div class="dividerH"></div>
          <div class="row" style="justify-content: space-between">
            <text>退款金额</text>
            <text>￥999</text>
          </div>
        </div></uni-popup-dialog
      >
    </uni-popup> -->
  </div>
</template>
<script setup lang="ts">
import ReservationType from '@/views/activityPages/const/reservation';
import { ref } from 'vue';
import TimePlace from '@/views/activityPages/components/time-place.vue';

import OrderContact from '@/views/activityPages/components/order-contact.vue';
import CountButtons from '@/components/activity/count-buttons.vue';
import RefundReasonItem from '@/views/activityPages/components/refund-reason-item.vue';
import TimeReservation from '@/views/activityPages/components/time-reservation.vue';
import { showConfirmDialog } from 'vant';
import { useRoute } from 'vue-router';
const route = useRoute();
const params = route.query;
let count = 0;
const images = ref([]);
const pop = ref(null);
const curReasonId = ref('0');
const reason = ref(null);
const reasonText = ref('');
const fileList = ref([]);
function removeImage(image) {
  images.value = images.value.filter((item) => item !== image);
}
const reasons = ref([
  {
    id: '0',
    reason: '需更改出行日期',
    isSelected: false,
  },
  {
    id: '1',
    reason: '信息填写错误重买',
    isSelected: false,
  },
  {
    id: '2',
    reason: '其他',
    isSelected: false,
  },
]);

function changeReason(item) {
  console.log('radioChange', item);
  curReasonId.value = item;
}

function applyRefund() {
  showConfirmDialog({
    title: '申请退订',
    message: '退款后订单无法恢复,请确认是否申请',
  })
    .then(() => {
      // on confirm
      confirm();
    })
    .catch(() => {
      // on cancel
    });
}

function confirm() {
  //todo
}
function choosePhoto() {
  uni.chooseImage({
    count: 1, //最多可以选择的图片张数，默认9
    // sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
    // sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
    success(res) {
      console.log('选择图片完成', res);
      // 调用上传图片的接口
      // _this.uploadPhoto(res.tempFilePaths)
      images.value = [...images.value, ...res.tempFilePaths];
    },
    fail(err) {
      console.log('失败', err);
    },
    complete() {
      console.log('结束');
    },
  });
}
function onCountChange(i) {
  count = i;
  console.log('onCountChange', count);
}
</script>

<style scoped lang="scss">
@import url('@/views/activityPages/style/card.css');
.refundButton {
  width: 288px;
  height: 37px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(17, 154, 255, 1);
  color: rgba(240, 239, 239, 1);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.textUpload {
  line-height: 14px;
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.upload {
  width: 100px;
  height: 49px;
  line-height: 20px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 1);
}
.textFhsah {
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
}
.textF111 {
  font-size: 18;
  font-weight: bold;
}
.textName {
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
}
.moneyText12313 {
  color: rgba(236, 94, 65, 1);
  font-size: 8px;
}

.textMoney111 {
  color: rgba(232, 89, 47, 1);
  font-size: 18px;
}

.textTitle1 {
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  font-weight: bold;
}

.align-left {
  align-items: left;
}

.noteText {
  line-height: 20px;
  background-color: rgba(255, 186, 0, 0.45);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  //text-align: center;
  font-family: Roboto;
  padding: 15px;
}

.image {
  width: 150px;
  height: 85px;
  border-radius: 5px;
  object-fit: cover;
}
</style>
